<template>
	<view class="box">
		<view class="top">
			<view class="tops">
				<image src="../../static/me.png" mode=""></image>
			</view>
		</view>
		<view class="bottom1">
			<view class="bottom">
				<view class="one flex" >
					<view class="con1" v-for="(item,index) in list" :key="index">
						<image src="../../static/xun2.png" mode=""></image>
						<p class="p1">{{item.p1}}</p>
						<p>{{item.p2}}</p>
					</view>
				</view>
				<view class="two flex">
					<view class="con1" v-for="(item,index) in list1" :key="index">
						<image src="../../static/xun2.png" mode=""></image>
						<p class="p1">{{item.p1}}</p>
						<p>{{item.p2}}</p>
					</view>
				</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						Image1: "/static/xun2.png",
						p1: "1里",
						p2:'先行先锋'
					},
					{
						Image1: "/static/xun3.png",
						p1: "500里",
						p2:'长征精神'
					},
				 {
					Image1: "/static/xun4.png",
					p1: "1000里",
					p2:'英雄之路'
					},
					
				],
				list1: [{
						Image1: "/static/xun5.png",
						p1: "1里",
						p2:'最佳勇士'
					},
					{
						Image1: "/static/xun6.png",
						p1: "500里",
						p2:'长征纪念'
					},
				 {
					Image1: "/static/xun1.png",
					p1: "1000里",
					p2:'胜利会师'
					},
					
				]
			}
		},
		onLoad() {
	
		},
		methods: {
		
		}
	}
</script>

<style>
	.flex{display: flex;justify-content: space-between;}
	.top{background-color:#f00;height:10rem;padding:5rem 0 0 0;}
	.tops{margin:0 auto;width:25%;height:6rem;text-align: center;background-color:#ccc;border-radius:5rem;}
	.tops image{width:90%;height:4rem;text-align: center;margin:0.3rem auto;}
	.bottom{border-radius:1rem;background-color: #fff;width:100%; position: relative;top:-10px;padding:2rem 0;}
	.one{width:90%;margin:0 auto;}
	.two{width:90%;margin:0 auto;}
	.con1{width:20%;}
	.bottom p{text-align: center;}
	.bottom .p1{color: #666;font-size:0.8rem;}
	.con1 image{width:100%;height:5rem;}
	/* .con1 image{width:20%;height:2rem;} */
</style>